
<template>
  <div class="app-container">
    <div class="app-permission-container mb8">
      <div class="page-list-title">门店照片</div>
      <div class="img-list content" v-if="baseData['imgUrlVos'] && baseData['imgUrlVos'].length">
        <img v-for="(item,index) in baseData['imgUrlVos']" :key="index" :src="item.url"/>
      </div>
      <div class="page-list-title">商家信息</div>
      <div class="app-dialog content account-info">
        <el-form
            class="form-content"
            ref="store-form" label-position="left"
            label-width="120px">
            <el-form-item class="form-content-item" label="商家名称：">
              <div class="form-val flex-normal">
                <span class="val-txt">{{ baseData['shopName'] }}</span>
              </div>
            </el-form-item>
            <el-form-item class="form-content-item" label="商家地址：">
              <div class="form-val flex-normal">
                <span class="val-txt">{{ baseData['shopAddress'] }}</span>
              </div>
            </el-form-item>
            <el-form-item class="form-content-item" label="负责人：" >
                <div class="form-val flex-normal">
                  <span class="val-txt">{{ baseData['head'] }}</span>
                </div>
            </el-form-item>
            <el-form-item class="form-content-item" label="负责电话：">
              <div class="form-val flex-normal">
                <span class="val-txt">{{ baseData['headPhone'] }}</span>
              </div>
            </el-form-item>
            <el-form-item class="form-content-item" label="店铺状态：">
              <div class="form-val no-border flex-normal">
                <el-radio-group v-model="baseData['cooperateState']" disabled>
                  <el-radio label="0">存续</el-radio>
                  <el-radio label="1">停用</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
            <el-form-item class="form-content-item" label="到期时间：" >
              <div class="form-val flex-normal">
                <span class="val-txt">{{ baseData['endTime'] }}</span>
              </div>
            </el-form-item>
          </el-form>
      </div>
      <div class="page-list-title">核销微信</div>
      <div class="content code-list flex-normal" v-if="acddWriteOffUserList.length">
        <div class="code-item flex-normal" v-for="(item, index) in acddWriteOffUserList" :key="index">
          <div class="code-img">
            <vue-qr :size="115" :text="getQRcode(item)" />
          </div>
          <div class="con-info">
            <template v-if="!item.userNickName">
              <div class="con-status-content flex-normal">
                <span class="status-txt error">未绑定</span>
              </div>
            </template>
            <template v-else>
              <div class="con-status-content flex-normal">
                <span class="status-txt">已绑定</span>
                <span class="status-btn flex-center" v-hasPermi="['shop:account:unbundle']" @click="unbindFn(item)">解绑</span>
              </div>
              <div class="con-info-content flex-normal">
                <span class="info-txt">微信号：</span>
                <span class="info-bar flex-center">{{item.userNickName || '未命名'}}</span>
                <span class="info-txt">{{item.name}}</span>
              </div>
              <div class="con-info-content flex-normal">
                <span class="info-txt">openid：</span>
                <span class="info-txt">{{item.openId}}</span>
              </div>
            </template>
            <div class="warning-desc flex-normal">
              <i class="desc-icon el-icon-info"></i>
              <span class="desc-txt">核销人员微信扫描此二维码后，绑定店铺；如果需要换绑，请重新扫描此二维码</span>
            </div>
          </div>
        </div>
      </div>
      <div class="page-list-title flex-between" v-if="['3'].includes(`${baseData['shopType']}`)">
        <div class="title-txt flex-normal">
          <span class="txt-label">集团店铺</span>
          <span class="txt-desc" v-if="acddShopList.length">共{{ acddShopList.length }}家连锁店（集团店铺）</span>          
          <div class="warning-desc flex-normal">
            <i class="desc-icon el-icon-info"></i>
            <span class="desc-txt">连锁店按用户收费，每增加一个用户，增加{{0}}元；</span>
          </div>
        </div>
        <el-button v-hasPermi="['shop:account:addShop']" type="primary" size="small" @click="showDialog('store', 'add')">添加连锁店</el-button>
      </div>
      <div class="app-table-container" v-if="['3'].includes(`${baseData['shopType']}`)">
        <el-table :data="acddShopList" border>
          <el-table-column
            label="门店图片"
            align="center"
          >
          <template slot-scope="{row}">
            <rh-preview :list="row.imgUrlVos"></rh-preview>
          </template>
          </el-table-column>
          <el-table-column
            label="商家名称"
            align="center"
            key="shopName"
            prop="shopName"
            :show-overflow-tooltip="true" /> 
          <el-table-column
            label="经营地址"
            align="center"
            key="shopAddress"
            prop="shopAddress"
            :show-overflow-tooltip="true"/>
          <el-table-column
            label="负责人"
            align="center"
            key="head"
            prop="head"
            :show-overflow-tooltip="true"/>
          <el-table-column
            label="负责人电话"
            align="center"
            key="headPhone"
            prop="headPhone" />
          <el-table-column
            label="操作"  v-hasPermi="['shop:account:removeShop']"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{row}">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                :loading="row.isControl"
                @click="controlTypeRow(row)">
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <dialog-normal
      ref="dialog-store"
      :dialog-prop="{
        title: '添加连锁店',
        height: '55vh',
        width: '60%',
        submit: '确定',
        close: '取消'
      }"
      @normal-submit="submitDialog('store', dialogStore.currentItem)"
      >
      <template #dialog-content v-if="$refs[`dialog-store`] && $refs[`dialog-store`].showDialog">
        <el-form
          class="form-content"
          ref="store-form" label-position="left"
          :model="dialogStore.currentItem"
          label-width="120px">
          <div class="form-title">门店照片</div>
          <el-form-item class="form-content-item"
            label="" prop="imgUrlVos"
            :rules="{ required: true, message: `请上传门店图片`, trigger: 'change'}">
            <div class="form-val no-border" style="width: 100%">
              <imageUpload
                v-model="dialogStore.currentItem['imgUrlVos']"
                :limit="3" :isShowTip="false" />
            </div>
          </el-form-item>
          <div class="form-title">商家信息</div>
          <el-form-item class="form-content-item"
              label="商家名称：" prop="shopName"
              :rules="{ required: true, message: `商家名称不能为空`, trigger: 'blur'}">
              <div class="form-val flex-normal">
                <el-input v-model="dialogStore.currentItem['shopName']" placeholder="请输入店铺名称"></el-input>
              </div>
          </el-form-item>
          <el-form-item class="form-content-item"
              label="商家地址：" prop="shopAddress"
              :rules="{ required: true, message: `商家地址不能为空`, trigger: ['blur', 'change']}">
              <el-input readonly v-model="dialogStore.currentItem['shopAddress']" placeholder="请选择店铺地址" @click.native="showDialog('map', 'view')">
                <el-button slot="suffix" type="text" size="medium" icon="el-icon-search" @click="showDialog('map', 'view')"></el-button>
              </el-input>
          </el-form-item>
          <el-form-item class="form-content-item"
              label="负责人：" prop="head"
              :rules="{ required: true, message: `负责人不能为空`, trigger: 'blur'}">
            <div class="form-val flex-normal">
              <el-input v-model="dialogStore.currentItem['head']"></el-input>
            </div>
          </el-form-item>
          <el-form-item class="form-content-item"
              label="负责电话：" prop="headPhone"
              :rules="{ required: true, message: `负责电话不能为空`, trigger: 'blur'}">
            <div class="form-val flex-normal">
              <el-input v-model="dialogStore.currentItem['headPhone']"></el-input>
            </div>
          </el-form-item>
        </el-form>
      </template>
    </dialog-normal>
    <dialog-normal
      ref="dialog-map"
      :dialog-prop="{
        title: '选择位置',
        width: '60%',
        submit: '确定',
        close: '取消'
      }"
      @normal-submit="submitDialog('map', dialogStore.shopInfo)">
      <template #dialog-content v-if="$refs[`dialog-map`] && $refs[`dialog-map`].showDialog">
        <draw-map v-model="dialogStore.shopInfo"/>
      </template>
    </dialog-normal>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
import {
  getShopInfo, addShopLs, unbind
} from "@/api/userManage/store-account.js";
export default {
  name: "List",
  components: {
    VueQr,
    "dialog-normal": () => import("@/rhComponents/dialog/normal-dialog"),
    'draw-map': () => import('@/rhComponents/map/draw-map.vue'),
    'rh-preview': () => import('@/rhComponents/image-preview/index.vue')
  },
  data() {
    return {
      boo: {
        loading: false, // 遮罩层
      },
      baseData: {},
      acddShopList: [], //集团店铺列表
      acddWriteOffUserList: [], //核销员席位列表
      dialogStore: {
        currentItem: {},
        showInfo: {
          name: 'XXX店',
          desc: 'XXX街',
          latlng: '22.0,336.0'
        }
      },
    };
  },
  mounted(){
    let _self = this
    _self.getShopInfo()
  },
  methods: {
    async getShopInfo(){
      let _self = this
      _self.boo.loading = true
      await getShopInfo().then(res => {
        let {acddShopList, acddWriteOffUserList} = res.data
        _self.acddWriteOffUserList = acddWriteOffUserList || []
        _self.acddShopList = acddShopList || []
        _self.baseData = res.data
      })
      _self.boo.loading = false
    },
    unbindFn(row){
      this.$modal
        .confirm('是否确认解绑此核销员？')
        .then(function () {
          return unbind(row.id);
        })
        .then(() => {
          this.getShopInfo();
          this.$modal.msgSuccess("解绑");
        })
        .catch(() => {});
    },
    getQRcode(item){
      let url = 'http://subscriber.aicheduoduo.com/pages/store/bind'
      return `${url}?id=${item.id}`
    },
    // 事件集合 -- 转发
    actionsMaps(ref, acion, row){
      let _self = this
      let actionsMap = () => {
        return new Map([
          [{ref: 'map', acion: 'view:show'}, ()=>{              
            _self.$nextTick(() => {
              _self.$refs[`dialog-${ref}`].showDialog = true
            })
          }],
          [{ref: 'map', acion: 'submit'}, ()=>{
            if(!row || !row.desc || !row.latlng){
              _self.$refs[`dialog-${ref}`].loading = false;
              return _self.$message.error('请选择店铺地址')
            }
            _self.$set(_self.dialogStore.currentItem, 'shopAddress', row.desc)
            _self.$set(_self.dialogStore.currentItem, 'latitudeAndLongitude', row.latlng)           
            _self.$nextTick(() => {
              _self.$refs[`dialog-${ref}`].loading = false;
              _self.$refs[`dialog-${ref}`].showDialog = false
            })
          }],
          [{ref: 'store', acion: 'add:show'}, ()=>{
            _self.dialogStore.title = '添加商户'
            _self.dialogStore.currentItem = {}
            _self.$nextTick(() => {
              _self.$refs[`dialog-${ref}`].showDialog = true
            })
          }],
          [{ref: 'store', acion: 'submit'}, ()=>{
            let params = JSON.parse(JSON.stringify(row)), imgArr = []
            if(params.imgUrlVos){
              let arr = params.imgUrlVos.split(',')
              imgArr = arr.map(i => {
                return {
                  url: i
                }
              }) 
              params.imgUrlVos = imgArr
            }
            addShopLs(params).then(res => {
              _self.$message.success('添加成功')
              _self.getShopInfo()
              _self.$nextTick(() => {
                _self.$refs[`dialog-${ref}`].showDialog = false
              })
            }).finally(() => {
              _self.$refs[`dialog-${ref}`].loading = false;
            })
          }]
        ])
      }
      let actions = [...actionsMap()].filter(([key,value])=>(key.ref == ref && key.acion == acion))
      actions.forEach(([key,value])=>value.call(this))
    },
    showDialog(ref, type, row) {
      let _self = this;
      if (_self.$refs[`${ref}-form`]) {
        this.resetForm(`${ref}-form`);
      }
      _self.$nextTick(() => {
        _self.actionsMaps(ref, `${type}:show`, row)
      })
    },
    submitDialog(ref, row) {
      let _self = this;
      if(this.$refs[`${ref}-form`]){
        this.$refs[`${ref}-form`].validate((valid) => {
          if (valid) {
            _self.$refs[`dialog-${ref}`].loading = true
            _self.actionsMaps(ref, `submit`, row)
          } else {
            _self.$refs[`dialog-${ref}`].loading = false;
            return false;
          }
        });
      }else{
        _self.$refs[`dialog-${ref}`].loading = true
        _self.actionsMaps(ref, `submit`, row)
      }
    },
  },
};
</script>
<style scoped lang="scss">
.page-list-title{
  margin-bottom: vh(20);
  line-height: vh(34);
  font-size: vh(13);
  color: #0003AA;
  .txt-desc{
    font-size: 13px;
    color: #3E3E3E;
    margin-left: 10px;
  }
  .warning-desc{
    margin-top: 0 !important;
  }
}
.content {
  margin-bottom: vh(20);
}
.img-list {
  img {
    width: vw(100);
    margin-left: vw(10);
  }
}
.form-content{
  .val-txt{
    font-size: 13px;
  }
  .form-content-item{
    position: relative;
    .code-btn-unit, .code-desc-unit, .code-success-unit{
      position: absolute;
      left: vw(400);
      top: 50%;
      transform: translateY(-50%);
      font-size: vh(13);
    }
    .code-success-unit{
      color: #0003AA;
    }
  }
  .form-val {
    width: vw(360);
    flex-wrap: nowrap;
    &.no-border{
      border: none;
    }
  }
}
.account-info {
  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
    color: #3d3d3d;
  }
  .el-button--mini.is-circle {
    padding: 3px;
  }
}
.code-list {
  flex-wrap: wrap;
  .code-item{
    width: 50%;
    flex-wrap: nowrap;
    align-items: flex-start;
    .con-info{
      padding-top: 20px;
      .status-btn{
        margin-left: 25px;
        font-size: 13px;
        background: #0003AA;
        cursor: pointer;
        padding: 3px 10px;
        border-radius: 3px;
        color: #fff;
      }
      .status-txt{
        font-size: 13px;
        font-weight: 500;
        color: #0003AA;
        &.error{
          color: #E2231A;
        }
      }
      .con-status-content, .con-info-content{
        margin-top: 10px;
      }
      .info-bar{
        margin-right: 10px;
        font-size: 13px;
        background: #EDEDED;
        cursor: default;
        padding: 3px 10px;
        border-radius: 3px;
        color: #16C4AF;
      }
      .info-txt{
        font-size: 13px;
        color: #444;
      }
    }
  }
}
.warning-desc{
  margin-top: 10px;
  .desc-icon{
    color: #F7B212;
  }
  .desc-txt{
    margin-left: vw(10);
    font-size: vh(13);
    color: #7F7F7F;
  }
}
</style>